import { ref } from 'vue'
import { defineStore } from 'pinia'
import { DARK_MODE, COLLAPSED } from '@/config/constants'

export const useLayoutStore = defineStore('layout', () => {
  const darkMode = ref(localStorage.getItem(DARK_MODE) || 'light')

  const collapsed = ref(JSON.parse(localStorage.getItem(COLLAPSED)) || false)
  const changeCollapsed = () => {
    collapsed.value = !collapsed.value
    localStorage.setItem(COLLAPSED, collapsed.value)
  }
  const changeDarkMode = (darkModeValue) => {
    if (darkModeValue) {
      darkMode.value = 'dark'
      document.body.setAttribute('arco-theme', 'dark')
    } else {
      darkMode.value = 'light'
      document.body.removeAttribute('arco-theme')
    }
    localStorage.setItem(DARK_MODE, darkMode.value)
  }

  return { collapsed, changeCollapsed, darkMode, changeDarkMode }
})
